<template>
  <div>
   <!-- 布局 -->
   <div class="container">

    <header>
      <van-nav-bar   >
        <template #left>
           <van-icon name="arrow-left" size="18"
           @click="onclickleft"  />
          <span style="margin-left : 10px">提交订单</span>
         
          
        </template>
      </van-nav-bar>
    </header>
    
    <main class="content">


      <van-cell style="text-align: left;margin-top: 20px;" >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title >
          <span class="custom-title">美业-美发店</span>
          <van-tag type="danger">{{$route.query.val.productList.send}}</van-tag>
        </template>
      </van-cell>


      <van-cell-group inset style="margin-top: 20px;">
        <van-cell title="提货人" value="我" style="text-align: left" />
        <van-cell title="手机号" value="13888888888" style="text-align: left" />
      </van-cell-group>

      <van-cell-group inset style="margin-top: 20px;">
        <div >
          <div style="text-align: left;padding:15px;" >
            <span ><b>商品信息</b> </span>
          </div>
           
          <div class="middlepro">
          <!-- left -->
 
          <div style="margin-left: -60px;">
          <img style="width:70px;height:70px" :src="$route.query.val.productList.img"/>
        </div>

        <div  style="margin-left: -130px;">   
           <span > <b >{{$route.query.val.productList.goodsName}}</b> </span>
          </div>

      
          
          <!-- right -->
          <div style="margin-right: -55px;">
            <span> <b style="color:red">￥{{$route.query.val.productList.price}}</b> </span>
            <br>
            <span> x{{$route.query.val.value}} </span>
          </div>
          </div>
          


          
        </div>
        <!-- <van-cell title="商品信息"  style="text-align: left" >
        <template #title>
          <span style="margin-left: 5px;">商品信息</span> 
          <img src="https://i.postimg.cc/TPDNJ16D/1.jpg" />
          
        </template>
      </van-cell> -->
      
        <van-cell title="买家留言" is-link  style="text-align:left" 
        @click="pushmessage()"/>
       <div  style="float:right">
        <van-cell  value="共一件商品，合计：￥39" style="text-align: rigth" />
      </div>
        

      </van-cell-group>

      
      
    </main>
  
    <footer>
      <van-submit-bar 
      :price="3050" 
      button-text="提交订单"
       @submit="onSubmit" />
    </footer>
  
  </div>
    
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';
import { Tag } from 'vant';

Vue.use(Tag);
Vue.use(NavBar);
  export default {
    data(){
      return{
        data:this.$route.query
      }
    },
  methods: {
      pushmessage() {
      this.$router.push('/message')
      },
      
    onclickleft() {
      this.$router.push({path:'/pro'})
    },
    onSubmit(){
      this.$router.push({path:'/payment'})
    }
   
    },
    // mounted() {
    //   console.log(this.$route);
    //   console.log(this.data);
    // },
  }
</script>

<style  scoped>
.van-submit-bar__text{
  text-align: left;
}

.middlepro{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.van-cell {
  margin: 0 16px;
  overflow: hidden;
  border-radius: 8px;
  width: 92%;
  
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: none; 
  background: yellow;
}

.content {
  flex: 1;
  overflow-y: auto;
  background: rgb(243, 240, 240);
  overflow: hidden;
  
}

footer {
  flex: none;
  background: pink;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

</style>